<template>
  <div class="ph48">
    <div class="border-bottom pb16">
      <div class="fs16 fw500">使用指南</div>
      <div class="mt8">设置工资表模板，即对应企业计薪时的月工资表头项目。每位员工只适用一个模板。</div>
    </div>
    <div class="mt16">
      <div class="title-block mb24">模板设置</div>
      <div class="mt16">模板名称：<a-input v-model="nameTemp" placeholder="请输入" style="width: 240px" /></div>
      <div class="mt16">
        尾数处理：<a-select v-model="decimalPlacesTemp" :options="decimalPlacesOptions" placeholder="请选择" style="width: 240px" />
      </div>
    </div>
    <div class="mt24">
      <div class="title-block">项目模板设置</div>
      <div class="tc-l3 mt12">设置此工资表模板参与计薪的项目。您可以新增或移除工资表模板的项目</div>
    </div>
    <div class="ta-right mt12">
      <a-input-search v-model="keyword" placeholder="请输入工资模板项目" style="width: 240px" />
    </div>
    <div class="mt16">
      <div class="flex-center border-bottom p12 fw500 bgc-back">
        <div class="flex-1">项目</div>
        <a-space :size="16" class="flex-shrink-0" style="width: 50px">操作</a-space>
      </div>
      <Draggable v-model="sortedList" @end="onDragEnd">
        <div
          v-for="item in sortedList"
          v-show="item.name.indexOf(keyword) >= 0"
          :key="item.name"
          class="ns-resize flex-center border-bottom p12"
        >
          <div class="flex-1">
            <a-icon type="unordered-list" class="mr4" style="color: var(--primary)" />
            {{ item.name }}
            <a-tooltip v-if="item.remarks" :title="item.remarks">
              <a-icon type="question-circle" theme="filled" class="ml4" />
            </a-tooltip>
          </div>
          <a-space :size="16" class="flex-shrink-0" style="width: 50px">
            <span v-if="item.canClose" class="tc-theme pointer fs12" @click="removeItem(item)">移除</span>
          </a-space>
        </div>
      </Draggable>
    </div>
    <div class="mt16 ta-center pb24">
      <a-space :size="24">
        <a-button @click="$emit('cancel')">取消</a-button>
        <a-button type="primary" @click="$emit('prev')">上一步</a-button>
        <a-button type="primary" @click="doSave">保存</a-button>
      </a-space>
    </div>
  </div>
</template>
<script>
import { decimalPlacesOptions } from "./funcs";
import Draggable from "vuedraggable";
export default {
  name: "",
  components: { Draggable },
  mixins: [],
  props: {
    id: {
      type: String,
      default: ""
    },
    wageItemLst: {
      type: Array,
      default: () => []
    },
    statItemLst: {
      type: Array,
      default: () => []
    },
    name: {
      type: String,
      default: ""
    },
    decimalPlaces: {
      type: [String, Number],
      default: ""
    }
  },
  data() {
    return {
      decimalPlacesOptions,
      sortedList: [],
      updateDict: {},
      keyword: "",
      nameTemp: "",
      decimalPlacesTemp: 4
    };
  },
  computed: {},
  watch: {
    wageItemLst: {
      handler() {
        this.initData();
      },
      immediate: true
    },
    statItemLst: {
      handler() {
        this.initData();
      },
      immediate: true
    },
    name: {
      handler(newVal) {
        this.nameTemp = newVal;
      },
      immediate: true
    },
    decimalPlaces: {
      handler(newVal) {
        this.decimalPlacesTemp = newVal;
      },
      immediate: true
    },
    nameTemp(newVal) {
      this.$emit("update:name", newVal);
    },
    decimalPlacesTemp(newVal) {
      this.$emit("update:decimalPlaces", newVal);
    }
  },
  created() {},
  mounted() {
    this.initData();
  },
  methods: {
    onDragEnd(evt) {
      this.updateDict = Object.assign(
        {},
        this.sortedList.map((li) => li.id)
      );
    },
    initData() {
      if (Object.keys(this.updateDict).length > 0) {
        const itemDict = {};
        for (let i = 0; i < this.wageItemLst.length; i++) {
          const item = this.wageItemLst[i];
          itemDict[item.id] = item;
        }
        for (let i = 0; i < this.statItemLst.length; i++) {
          const item = this.statItemLst[i];
          itemDict[item.id] = item;
        }
        let sortedArr = [];
        const sortedKeys = Object.values(this.updateDict);
        sortedKeys.sort();
        for (let i = 0; i < sortedKeys.length; i++) {
          const key = sortedKeys[i];
          if (itemDict[key]) {
            sortedArr.push(itemDict[key]);
            delete itemDict[key];
          }
        }
        const leftItems = Object.values(itemDict);
        if (leftItems && leftItems.length > 0) {
          sortedArr = [].concat(sortedArr, leftItems);
        }
        this.sortedList = sortedArr;
      } else {
        this.sortedList = [...this.wageItemLst, ...this.statItemLst];
      }
    },
    removeItem(record) {
      if (record.statisticalFormula || record.statisticalFormula === null) {
        this.$emit("del", "tongji", record.id);
      } else {
        this.$emit("del", "gongzi", record.id);
      }
    },
    doSave() {
      this.$emit("save", this.sortedList);
    }
  }
};
</script>
<style lang="scss"></style>
